Helpful Information

Category: CSS

Simple<style>Problem

Well,
just have a look at this style sheet
<STYLE>
body{
a:link{color:brown;text-decoration:underline}
a:hover{color:sandybrown; size:110%; text-decoration:none}
}
</style>
Is there anything wrong? I am not able to get the required output.
In any of the browser whatsoever.
Any suggestions would be appreciated.

size: is not valid, use font-size:

also, I have seen it happen that with a:hover and a:link you need to define a:active and a:visited as well and in order -

a:link
a:active
a:visited
a:hover

<STYLE>The type attribute is required. Whilst it won't fix your problem (I'm getting to that), you should change it:

<style type="text/css">

body{
a:link{This is invalid. You cannot nest rules. If you are trying to use descendant selectors, they should be space-separated:

body a:link {However, this is redundant as a elements can only ever be descendants of the body element.

color:brown;If you specify a foreground colour, you must always specify a background colour, too. You should never rely on a user agent's default style sheet to make your changes readable.

color:sandybrown;There is no defined colour called sandybrown. You aren't likely to get consistent results with that. Use the hexadecimal (#rgb or #rrggbb) or rgb functional (rgb(r, g, b)) notation to specify the colour instead.

size:110%;Though jscheuer1 is correct in that the actual property name is font-size, it is more important to mention that you shouldn't do this at all. Causing size changes on hover can lead to several problems, not limited to difficulty in selecting the element, reflowing layout, and flashing. All of these break accessibility guidelines, and could be illegal depending on where you are in the world, and the purpose of your site. In any case, it's a pain in the ass for users, so it's best avoided.

Mike

First of all thanks for that huge explanation.

i wanted to say that i had designed another page using the same elements as
they are shown here.but in that page this style sheet produced the out come.

Is there any hard and fast rule to use all the elemants as you specified.
that is-
a:link
a:active
a:visited
a:hover
as well as to specify the style type.which i have seen normally people on many websites don't care for.

My problem was solved by just giving a space between body and the first curly braces.

To know about color:sandybrown just go to:

http://www.w3schools.com/html/html_colornames.asp

lastly,
Is it necessary to use pt,px for size instead of percentage ,which i have seen many people using it.Is it better to use hex or r,g,b code instead of color names and that too only the 256 colors.

And,
The hover code might not be used by dynamic drive.but it is commonly used by almost all the sites now-a-days.

bye the way thanks a lot.

as well as to specify the style type.which i have seen normally people on many websites don't care for.Most sites are produced by graphic designers. Whilst they know how to make something aesthetically pleasing, most know nothing about how to author HTML properly. Much of the Web is filled with garbage - there's no need to add to the pile.

HTML isn't a language where emulation is meaningful, which is why I'm dismayed at the number of people who want to "hide" their source code. My document is different to yours, so why on Earth would I want to use the same mark-up!? OK, someone might want to use the same appearance, but they don't need to look at the mark-up to do that.

My problem was solved by just giving a space between body and the first curly braces.If you truly mean that

body {
a:link {
/* ... */
}
}is a "fix", then you are sorely mistaken. Any user agent that parses that without dismissing it as nonsense is either very forgiving, or broken.

To know about color:sandybrownI know what I am talking (or rather, writing) about. If you care to read the text before that list, you'll see that W3Schools agrees with me. There are only sixteen defined colour names. Any additional names are proprietary and should not be used on the Web. Use a colour code instead.

Is it necessary to use pt,px for size instead of percentagePixels and points should only be used when positioning relative to something which is itself is given dimensions in pixels or points (such as images).

Note that fonts should never be sized this way as it prevents IE users from resizing the text if they need to (another IE bug). Instead, size font with percentages and use em or ex units when positioning relative to text.

Percentage positioning should be used when it's logical. It's usually preferred because it produces more fluid layouts.

Is it better to use hex or r,g,b code instead of color namesIf you're using one of the sixteen defined names, you may as well use them. All other colours should be defined with colour codes.

The hover code might not be used by dynamic drive.but it is commonly used by almost all the sites now-a-days.The hover pseudo-class may be commonly used, but not to dynamically resize content. I've seen that "effect" used on just a handful of sites, and it was disasterous in every case. It looks tacky and unprofessional, and is annoying to interact with.

Mike

I have been following this thread with interest and I also need an answer to colouring links.

I have sections on the page which are different colours. Dark blue on one side and light blue on the other.

I want the dark blue side links to be different colours to the right side.

Can I use a class to change them and if so what would be the correct coding be.

The page is laid out in tables and I want to use a style sheet.

I have tried using the DIV tag but i think I must be using it wrong as it doesnt work.

could i have something along the lines of:

<p class="a:link right">link code</p>
<p class="a:link left">link code</p>

If i can, how do i code it into the external style sheet.

Thanks for helping

<p class="a:link right">link code</p>
<p class="a:link left">link code</p>A class name is just an identifier that groups several 'types' of element. It doesn't resemble a selector. The class names you'd be looking for above is 'right' and 'left', respectively. However, class names should really reflect what that grouping represents, not how it appears.

Why do you have two columns? Is there any particular reason? For example, if the right-hand column contained external links (probably doesn't, but stay with me :D), 'external-links' would be a much better class name than 'right'.

So, given:

<p class="left"><a href="...">...</a></p>you would select this in an external style sheet with:

p.left a {
/* Foreground and background colours should always
* be specified together. This is true even when the
* background colour may not change from the colour
* specified by ancestors. You can use the values
* transparent or inherit in cases like this.
*
* background-color: #rrggbb; /

color: #1a1fd6; / Some random(-ish) dark blue /
}You could select just the class itself by omitting the tag name:

.left a {
/ ... */
}Notice that the dot (.) is still present. This signifies a class name. A hash (#) signifies an id.

Though this discussion has focused mainly on classes, they aren't always necessary. Selectors are mainly based on structure: ancestor-descendant relationships, mainly. A typical one is:

a img {
border-style: none;
}which removes borders on all images that are contained within links.

Hope that helps,
Mike